<template>
  <div class="conte">
    <select v-model="selval" @change="sel">
      <option value="1">支付失败</option>
      <option value="2">完成支付</option>
      <option value="3">未发货</option>
      <option value="4">已发货</option>
      <option value="5">已收货</option>
      <option value="6">退款</option>
    </select>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      style="width: 100%"
    >
      <el-table-column prop="order_id" label="id"> </el-table-column>
      <el-table-column prop="nick_name" label="名字"> </el-table-column>
      <el-table-column prop="money" label="总价"> </el-table-column>
      <el-table-column label="商品">
        <template class="comm" slot-scope="scope">
          <div v-if="scope.row.childern">
            <img 
            style="height: 100px; float: left; margin-right: 10px"
            :src="scope.row.childern[0].img"
          />
          <span>{{ scope.row.childern[0].good_name }}</span>
          </div>
        </template>
      </el-table-column>

     
      <el-table-column label="修改">
        <template slot-scope="scope">
          <div class="modi">
            <select class="mod" @change="mod_val(scope.$index)">
              <option value="2">完成支付</option>
              <option value="3">未发货</option>
              <option value="4">已发货</option>
              <option value="5">已收货</option>
              <option value="6">退款</option>
            </select>
            <el-button type="primary" @click="modi(scope.$index)"
              >确定</el-button
            >
          </div>
        </template>
      </el-table-column>
      >
    </el-table>

    <div class="block" style="margin-top: 15px">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      token: "",
      tableData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条
      selval: 1,
      val: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    mod_val(val) {
      let mo = document.querySelectorAll(".mod");
      this.val = mo[val].value;
      console.log(this.val);
    },
    sel() {
      
      this.init();
    },
    init() {
      console.log(this.tableData)
      let mo = document.querySelectorAll(".mod");
      for (let i = 0; i < mo.length; i++) {
        mo[i].value = 2;
      }
      this.axios({
        method: "post",
        url: "http://api_devs.wanxikeji.cn/api/admin/OrderList",
        data: {
          token: this.$store.state.token,
          size: 10,
          status: this.selval,
        },
      }).then((res) => {
        this.tableData = res.data.data.data;
         console.log(this.tableData)
      });
    },
    modi(val) {
      this.axios({
        method: "post",
        url: "http://api_devs.wanxikeji.cn/api/admin/OrderStatusChange",
        data: {
          token: this.$store.state.token,
          order_id: this.tableData[
            this.currentPage * this.pageSize - (this.pageSize - val)
          ].order_id,
          status: this.val,
        },
      }).then((res) => {
        console.log(res);
        this.init();
      });
    },

    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style>
.comm {
  display: flex;
  justify-content: space-between;
}
select {
  margin-top: 20px;
  padding: 10px;
}
.conte {
  background: white;
  height: 100%;
  
}
</style>
